<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<jsp:include page="nav.jsp"/>


<div class="container-fluid">
    <div class="panel">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-6">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">标题</label>
                            <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入标题">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">查询</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <div class="btn-group" role="group" aria-label="...">
                        <a class="btn btn-success btn-sm" href="/toadd.do" target="_blank">新建</a>
                        <button type="button" class="btn btn-danger btn-sm batch-DelBtn">批量删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>文章标题</th>
                            <th width="100">已审核</th>
                            <th>已发布</th>
                            <th>阅读数</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${page.records}" var="news" varStatus="status">
                            <tr id="${news.id}">
                                    <%--              <td>${status.count}</td>--%>

                                <td>
                                    <input type="checkbox" class="isCheck">&nbsp;
                                </td>
                                <td>
                                    <a href="/showNews?id=${news.id}">${news.title}</a>
                                </td>
                                <td>
                                    <c:if test="${news.checked==1}">
                                        <input type="checkbox" name="checked" checked>&nbsp;&nbsp;
                                    </c:if>

                                    <c:if test="${news.checked!=1}">
                                        <input type="checkbox" name="checked">&nbsp;&nbsp;
                                    </c:if>

                                </td>
                                <td>${news.show==1?"是":"否"}</td>
                                <td>${news.readCount}</td>
                                <td>
                                    <button type="button" class="btn btn-xs btn-primary update_btn">修改</button>
                                    <button type="button" class="btn btn-xs btn-danger del_btn">删除</button>
                                </td>
                            </tr>
                        </c:forEach>

                        </tbody>
                    </table>

                    <c:if test="${!page.first}">
                        <a class="btn btn-xs" href="/list-news.do?pageNo=1&pageSize=${page.pageSize}">首页</a>
                    </c:if>

                    <c:if test="${!page.first}">
                        <a class="btn btn-xs"
                           href="/list-news.do?pageNo=${page.pre}&pageSize=${page.pageSize}">上一页</a>
                    </c:if>


                    <span> ${page.current}/${page.totalPage}</span>
                    <c:if test="${!page.last}">
                        <a class="btn btn-xs"
                           href="/list-news.do?pageNo=${page.next}&pageSize=${page.pageSize}">下一页</a>
                    </c:if>

                    <c:if test="${!page.last}">
                        <a class="btn btn-xs"
                           href="/list-news.do?pageNo=${page.totalPage}&pageSize=${page.pageSize}">尾页</a>
                    </c:if>
                </div>
            </div>
        </div>

        <!-- Button trigger modal -->
        <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
             Launch demo modal
         </button>
    -->
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">编辑新闻</h4>
                    </div>
                    <div class="modal-body">

                        <form id="form1">
                            <fieldset>
                                <input type="hidden" name="id" value="">
                                <div class="form-group">
                                    <label for="newstitle">标题</label>
                                    <input type="text" id="newstitle" class="form-control" placeholder="Disabled input"
                                           name="title" value="">
                                </div>
                                <div class="form-group">
                                    <label for="newsContent">主要内容</label>
                                    <textarea class="form-control" rows="3" id="newsContent" name="content"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="newstitle">已读数量</label>
                                    <input type="text" id="readCount" class="form-control" placeholder=""
                                           name="readCount" value="">
                                </div>

                                <div class="form-group">
                                    <label for="checked">是否审核</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="checked" value="1" name="checked">&nbsp;&nbsp;
                                    </label>

                                    <label for="checked">邮件通知</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="sendMail" value="1" name="sendMail">&nbsp;&nbsp;
                                    </label>

                                </div>


                                <div class="form-group">
                                    <label for="checked">是否发布</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="show" id="showOK" value="1"> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="show" id="showNo" value="0"> 否
                                    </label>
                                </div>


                            </fieldset>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="btn-submitupdate">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


</body>

<script src="/bootstrap-3.4.1-dist/js/jquery.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="/layer/layer.js"></script>
<script>
    $(function () {
        $(".del_btn").click(function () {
            let $btn = $(this);
            let $tr = $(this).parents("tr");
            layer.confirm('确认要删除吗', {icon: 3, title: '提示'}, function (index) {
                let newsId = $tr.attr("id");
                $.ajax({
                    type: "POST",
                    url: "/del-news.do",
                    data: "id=" + newsId,
                    success: function (data) {  // {success:true}
                        console.info(data.success)
                        // $tr.remove();
                        $tr.css("background", "#888")
                        $btn.remove();//自杀
                    },
                    dataType: "json"
                });
                layer.close(index);
            });
        });

        $(".update_btn").click(function () {
            let $btn = $(this);
            let $tr = $(this).parents("tr");
            let newsId = $tr.attr("id");
            $.post("/toupdate.do", {id: newsId}, function (data) {
                $("#form1 [name=id]").val(data.id);
                $("#form1 [name=title]").val(data.title);
                $("#form1 [name=content]").html(data.content);
                $("#form1 [name=readCount]").val(data.readCount);

                if (data.checked) {
                    $("#form1 [name=checked]").prop("checked", "checked");
                } else {
                    $("#form1 [name=checked]").removeProp("checked");
                }

                if (data.show) {
                    $("#showOK").prop("checked", "checked");
                } else {
                    $("#showNo").prop("checked", "checked");
                }

                $('#myModal').modal('show');
            }, "json")
        });

        $("#btn-submitupdate").click(function () {
            console.info("AJAX 提交更新操作，返回成功后...")

            /*    let id = $("#form1 [name=id]").val();
                let title = $("#form1 [name=title]").val();
                let content = $("#form1 [name=content]").val();

                let readCount = $("#form1 [name=readCount]").val();
                let checked = $("#form1 [name=checked]").val();
                let show = $("#form1 [name=show]").val();
          */

            $.post("/submit_update.do",
                $("#form1").serialize(),

                function (data) {
                    if (data.success) {
                        $('#myModal').modal('hide');
                        window.location.reload();
                    }
                }, "json")


        })


        //表格全选/反选
        $("#selectAll").click(function (e) {
            // let checkMe = $(this).prop("checked");
            $(".isCheck:checkbox").not($(this)).prop("checked", $(this).prop("checked"))
        })
        //  批量删除事件
        $(".batch-DelBtn").click(function () {
            let $checked = $(".isCheck:checkbox:checked");
            if ($checked.length == 0) {
                layer.msg("未请选择行");
                return;
            }


            layer.confirm('确认要删除吗', {icon: 3, title: '提示'}, function (index) {
                let ids = [];
                $checked.each(function (i, e) {
                    let id = $(e).parents("tr").attr("id");
                    ids.push(id);
                })
                console.info(ids.join("&id="));

                $.ajax({
                    type: "POST",
                    url: "/del-news.do",
                    data: "id=" + ids.join("&id="),
                    success: function (data) {  // {success:true}
                        // console.info(data.success)
                        $checked.each(function (i, e) {
                            let $tr = $(e).parents("tr");
                            $tr.css("background", "#888")
                            $tr.find("td:last").html("")
                        })
                    },
                    dataType: "json"
                });
                layer.close(index);
            });

        });
    })


</script>
</html>